<template>
	<div id="list">
		<nav>
			<p>
				<router-link to="/list/listboy" class="gender">男生精选</router-link>
	    		<router-link to="/list/listgirl" class="gender">女生精选</router-link>
    		</p>
		</nav>

    	<router-view></router-view>
	</div>
</template>

<script>

  export default{

  }

</script>

<style scoped>
#list{
	display: flex;
	flex-direction: column;

	color:#999;
	background-color: #fff;
}
#list nav{
	width: 100%;
	height: 29px;
	padding: 7px 0;
	border-bottom: 1px solid #F7F7F7;
}
#list nav p{
	width: 13.4rem;
    height: 25px;
    margin-left: 6.7rem;
    border: solid 1px #f99;
    border-radius: 3px;
}
#list nav p .gender{
	float: left;
	width: 6.7rem;
	text-align: center;
	line-height: 25px;
	color: #444;
}
.router-link-active	{
	background-color: #f99;
	color: #fff!important;
}
</style>
